<template>
  <div class="page-container detail-container">
    <h3 class="detail-sub-title">订单基本信息</h3>
    <el-row :gutter="20">
      <el-col :span="8">订单ID<span class="detail-value">{{detailData.num}}</span></el-col>
      <el-col :span="8">用户名<span class="detail-value">{{detailData.memberName}}</span></el-col>
      <el-col :span="8">联系电话<span class="detail-value">{{detailData.memberPhone}}</span></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">订单类型<span class="detail-value">{{SALE_TYPE[detailData.saleType] || ''}}</span></el-col>
      <el-col :span="8">站点名称<span class="detail-value">{{detailData.siteName}}</span></el-col>
      <el-col :span="8">影片名称<span class="detail-value">{{detailData.moveName}}</span></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">详细信息<span class="detail-value">{{detailData.hallName}} {{detailData.hallId}}</span></el-col>
      <el-col :span="8">单价<span class="detail-value">{{detailData.price}}</span></el-col>
      <el-col :span="8">数量<span class="detail-value">{{detailData.amount}}</span></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">优惠类型<span class="detail-value">{{detailData.privilegeOrder ? '权益' : '无优惠'}}</span></el-col>
      <el-col :span="8">优惠金额<span class="detail-value">{{detailData.price - detailData.cost}}</span></el-col>
      <el-col :span="8">实际支付金额<span class="detail-value">{{detailData.cost}}</span></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">下单时间<span class="detail-value">{{detailData.orderDate | dateFrm}}</span></el-col>
      <el-col :span="8">付款时间<span class="detail-value">{{detailData.payDate | dateFrm}}</span></el-col>
      <el-col :span="8">出票时间<span class="detail-value">{{detailData.outTicketTime| dateFrm}}</span></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">支付方式<span class="detail-value">{{payMethod}}</span></el-col>
      <el-col :span="8">状态<span class="detail-value">{{ORDER_STATUS[detailData.status]}}</span></el-col>
      <el-col :span="8">第三方流水账号<span class="detail-value">{{detailData.thirdSerialNumber}}</span></el-col>
    </el-row>
    <!-- <el-row :gutter="20">
      <el-col :span="8">备注<span class="detail-value"></span></el-col>
    </el-row> -->

    <h3 class="detail-sub-title">影票信息</h3>
    <el-table class="el-table-modify" :data="detailData.items">
      <el-table-column prop="cinemaName"  label="站点名称" align="center">
        {{detailData.siteName}}
      </el-table-column>
      <el-table-column prop="movieName"  label="影票名称" align="center">
      </el-table-column>
      <el-table-column prop="startTime"  label="开场时间" align="center">
      </el-table-column>
      <el-table-column prop="seatInfo"  label="座位信息" align="center">
      </el-table-column>
      <el-table-column prop="sellId"  label="序列码" align="center"></el-table-column>
      <el-table-column prop="qrCode"  label="验证码" align="center"></el-table-column>
      <el-table-column prop="memberType"  label="对应用户" align="center">
        <template slot-scope="scope">
          {{ORDER_MEMBER_TYPE[scope.row.buyerType]}}
        </template>
      </el-table-column>
    </el-table>

    <div class="detail-toolbar">
      <el-button size="small" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import {ORDER_STATUS, PAYMENT_WAY, ORDER_MEMBER_TYPE, SALE_TYPE} from '@/utils/const';
import {viewingOrderDetail} from '@/api/order' 

export default {
  name: 'MovieOrderDetail',
  props: [],
  data() {
    this.ORDER_STATUS = ORDER_STATUS;
    this.PAYMENT_WAY = PAYMENT_WAY;
    this.ORDER_MEMBER_TYPE = ORDER_MEMBER_TYPE;
    this.SALE_TYPE = SALE_TYPE;

    return {
      detailData: {
        online: false,
        privilegeOrder: false,
        items: []
      },
    }
  },
  computed: {
    payMethod() {
      const {online, privilegeOrder} = this.detailData;
      return (online ? '线上' : '线下') + (privilegeOrder ? '+权益' : '');
    }
  },
  methods: {
    async requestDetail(id) {
      try {
        const {data} = await viewingOrderDetail(id)
        this.detailData = data;
      } catch (err) {
        console.log(err);
      }
    },
    cancel() {
      this.$router.go(-1);
    }
  },
  created() {
    let { id } = this.$route.params;
    if (id) {
      this.requestDetail(id);
    }
  }
}
</script>

<style lang="scss">

</style>